﻿<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
        * {
            box-sizing: unset;
        }

        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }

        .logo-list li {
            padding: 8px;
        }

        .logo-list li:hover {
            background-color: #f3f3f3;
        }

        .type-list a:hover {
            color: #1299ec;
        }

        .skus {
            list-style: none;
        }

        .skus li {
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
            border: 2px solid #dd1144;
        }

        .skus img {
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>


    <!--list-content-->
    <div class="main">
        <div class="py-container">

            <!--面包屑-->
            <div class="bread">
                <ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li v-for="(v,k) in breads" :key="k">
                        <a href="#" v-if="k < 2">{{v.name}}</a>
                        <span v-else>{{v.name}}</span>
                    </li>
                </ul>
                <!--已选择过滤项 展示和移除-->
                <ul class="tags-choose">
                    <li class="tag" v-for="(v,k) in search.filterMap" v-if="k !=='分类'">
                        {{k}}:
                        <span style="color: red">
                            {{getFilterValue(k,v)}}
                        </span>
                        <i class="sui-icon icon-tb-close" @click="removeFilter(k)"></i>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector 过滤项列表-->
            <div class="clearfix selector">
                <div class="type-wrap" v-for="(v,k,i) in remainFilters" :key="k" v-if="k!=='品牌'"
                     v-show="i <5 || showFilter">
                    <div class="fl key">
                        {{k}}
                    </div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li v-for="(i,j) in v" :key="j" @click="selectFilter(k,i.id||i)">
                                <a>{{i.name || i}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>

                <div class="type-wrap logo" v-else>
                    <div class="fl key brand">{{k}}</div>
                    <div class="value logos">
                        <ul class="logo-list">
                            <li v-for="(i,j) in v" :key="j" v-if="i.image" @click="selectFilter(k,i.id)"><img
                                    :src="i.image"/></li>
                            <li v-else style="text-align: center" @click="selectFilter(k,i.id)">
                                <a style="line-height: 30px; font-size: 12px" href="#">i.name</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                    </div>
                </div>

                <div class="type-wrap" style="text-align: center">
                    <v-btn small flat @click="showFilter=true" v-show="!showFilter">
                        更多
                        <v-icon>arrow_drop_down</v-icon>
                    </v-btn>
                    <v-btn small="" flat @click="showFilter=false" v-show="showFilter">
                        收起
                        <v-icon>arrow_drop_up</v-icon>
                    </v-btn>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li class="active">
                                <a href="#">综合</a>
                            </li>
                            <li>
                                <a href="#" @click="loadDataByStock">销量</a>
                            </li>
                            <li>
                                <a href="#" @click="loadDataByUpDateTime">新品</a>
                            </li>
                            <li>
                                <a href="#">评价</a>
                            </li>
                            <li>
                                <a href="#" @click="loadDataByPrice">价格</a>
                            </li>
                        </ul>
                        <!--顶部分页条-->
                        <div class="top-pagination">
                            <span>共 <i style="color: #222;">{{total}}</i> 个商品</span>
                            <span><i style="color: red;">{{search.page}}</i>/{{totalPage}}</span>
                            <a class="btn-arrow" href="#" style="display: inline-block" @click="prevPage"
                               v-if="search.page != totalPage">&lt;</a>
                            <!--<a class="btn-arrow" href="#" style="display: inline-block" @click="prevPage" v-else></a>-->
                            <a class="btn-arrow" href="#" style="display: inline-block" @click="nextPage"
                               v-if="search.page != totalPage">&gt;</a>
                        </div>
                    </div>
                </div>
                <!--搜索结果展示-->
                <div class="goods-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <a :href="'/item/'+goods.id+'.html'" target="_blank"><img
                                            :src="goods.selectedSku.image"
                                            height="200"/></a>
                                    <ul class="skus">
                                        <li :class="{selected: sku.id == goods.selectedSku.id}"
                                            v-for="sku in goods.skus" :key="sku.id"
                                            @mouseenter="goods.selectedSku = sku">
                                            <img :src="sku.image">
                                        </li>
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>{{ly.formatPrice(goods.selectedSku.price)}}</i>
                                    </strong>
                                </div>
                                <div class="attr" style="overflow: hidden">
                                    <em>{{goods.selectedSku.title}}</em>
                                </div>
                                <div class="cu" style="overflow: hidden">
                                    <em><span>促</span><em v-html="goods.subTitle"></em></em>
                                </div>
                                <div class="commit">
                                    <i class="command">已有800000人评价</i>
                                </div>
                                <div class="operate">
                                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="fr">
                    <div class="sui-pagination pagination-large">
                        <ul style="width: 550px">
                            <li :class="{prev:true,disabled:search.page===1}" @click="prevPage">
                                <a href="#">«上一页</a>
                            </li>
                            <li :class="{active: index(i)===search.page}" v-for="i in Math.min(5,totalPage)" :key="i"
                                @click="search.page=index(i)">
                                <a href="#">{{index(i)}}</a>
                            </li>
                            <!--判断页数是否大于1  大于1显示...else 不显示-->
                            <li class="dotted" v-if="totalPage > 1"><span>...</span></li>
                            <li class="dotted" v-else></li>
                            <li :class="{next:true,disabled:search.page===totalPage}" @click="nextPage">
                                <a href="#">下一页»</a>
                            </li>
                        </ul>
                        <div><span>共 {{totalPage}} 页</span>
                            <span v-if="totalPage > 1">到第
                                <input type="text" class="page-num" :value="search.page">
                                页 <button class="page-confirm" onclick="alert('去不了...')">确定</button>
                            </span>
                            <span v-else>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!--hotsale-->
            <div class="clearfix hot-sale">
                <h4 class="title">热卖商品</h4>
                <div class="hot-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_03.png"/>
                                </div>
                                <div class="attr">
                                    <em>金属A面，360°翻转，APP下单省300！</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_04.png"/>
                                </div>
                                <div class="attr">
                                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4068.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有20人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            search: {
                key: "", // 搜索页面的关键字
                page: 0, // 记录分页参数
                filterMap: {}, //选中的过滤项
            },
            goodsList: [], //商品列表
            total: 0, //总条数
            totalPage: 0, //总体页数
            filterList: {}, // 过滤项
            showFilter: false,
            breads: [], //商品分类的面包屑
        },
        created() {
            // 获取url路径中的参数，目前可以想到的有搜索参数和分页参数，分页参数需要我们初始化
            const key = ly.getUrlParam("key");
            // const page = ly.getUrlParam("page");
            const hash = ly.parse(location.hash.substring(1));

            if (!key) {
                return;
            }
            //保存赋值key
            hash.key = key;
            // this.search.page = page ? parseInt(page) : 1;
            hash.page = hash.page ? parseInt(hash.page) : 1;
            hash.filterMap = hash.filterMap || {};
            this.search = hash;
            // 加载
            this.loadData();
            this.loadFilterList();
        },

        methods: {
            //已选择的过滤项展示
            getFilterValue(k, v) {
                if (!this.filterList[k]) {
                    return ""
                }
                if (k === '品牌') {
                    return this.filterList[k][0].name;
                }
                return v;
            },

            //取消已选中的过滤项
            removeFilter(k) {
                //复制原来的searchFilterMap
                const {...obj} = this.search.filterMap;
                //去除
                delete obj[k];
                //在赋值给search Filter
                this.search.filterMap = obj;
            },

            //过滤字段的选择
            selectFilter(key, val) {
                // 复制原来的search
                const {...obj} = this.search.filterMap;
                //添加新的属性
                obj[key] = val;
                //赋值给search
                this.search.filterMap = obj;
            },

            //页面加载 分页
            loadData() {
                ly.http.post("search/page", this.search).then(({data}) => {
                    if (data.items.length == 0) {
                        return;
                    }
                    this.total = data.total;
                    this.totalPage = data.totalPage;
                    data.items.forEach((goods) => {
                        //转为JS对象
                        goods.skus = JSON.parse(goods.skus);
                        // 添加默认选中的sku
                        goods.selectedSku = goods.skus[0];
                    });
                    this.goodsList = data.items;
                });
            },

            /**
             * 根据价格排序显示
             */
            loadDataByPrice() {
                ly.http.post("search/page/price", this.search).then(({data}) => {
                    if (data.items.length == 0) {
                        return;
                    }

                    this.total = data.total;
                    this.totalPage = data.totalPage;
                    data.items.forEach((goods) => {
                        //转为JS对象
                        goods.skus = JSON.parse(goods.skus);
                        // 添加默认选中的sku
                        goods.selectedSku = goods.skus[0];
                    })
                    this.goodsList = data.items;
                });
            },

            /**
             * 根据销量排序显示(goods里面没有stock 暂时无法实现 )
             */
            loadDataByStock() {
                ly.http.post("search/page/stock", this.search).then(({data}) => {
                    if (data.items.length == 0) {
                        return;
                    }
                    this.total = data.total;
                    this.totalPage = data.totalPage;
                    data.items.forEach((goods) => {
                        //转为JS对象
                        goods.skus = JSON.parse(goods.skus);
                        // 添加默认选中的sku
                        goods.selectedSku = goods.skus[0];
                    });
                    this.goodsList = data.items;
                });
            },

            /**
             * 根据创建时间 ==> 新品
             *
             */
            loadDataByUpDateTime() {
                ly.http.post("search/page/update", this.search).then(({data}) => {
                    if (data.items.length == 0) {
                        return;
                    }
                    this.total = data.total;
                    this.totalPage = data.totalPage;
                    data.items.forEach((goods) => {
                        //转为JS对象
                        goods.skus = JSON.parse(goods.skus);
                        // 添加默认选中的sku
                        goods.selectedSku = goods.skus[0];
                    })
                    this.goodsList = data.items;
                });
            },

            /**
             * 搜索过滤
             */
            loadFilterList() {
                ly.http.post("/search/filter", this.search)
                    .then(resp => {
                        this.filterList = resp.data;
                        //判断分类的数量是否只有一个
                        const categories = this.filterList['分类'];
                        if (categories.length == 1) {
                            //查询分类 写入面包屑
                            ly.http.get("/item/category/levels?cid3=" + categories[0].id)
                                .then(resp => {
                                    this.breads = resp.data;
                                })
                        }
                    })
            },

            //分页
            index(i) {
                if (this.search.page <= 3 || this.totalPage <= 5) {
                    // 当前页小于3，则页码就是从 i 开始
                    return i;
                } else if (this.search.page <= this.totalPage - 2) {
                    // 大于3，则从page-2开始，然后逐个加1
                    return this.search.page - 3 + i;
                } else {
                    return this.totalPage - 5 + i;
                }
            },

            //上一页
            prevPage() {
                if (this.search.page > 1) {
                    this.search.page--
                }
            },

            //下一页
            nextPage() {
                if (this.search.page < this.totalPage) {
                    this.search.page++
                }
            },
        },
        watch: {
            "search.page":
                {
                    handler(val) {
                        // 把search对象变成请求参数，拼接在url路径
                        //把search对象中除了key以外的属性记录在obj对象中（解构表达式)
                        const {key, ...obj} = this.search;
                        window.location.hash = "#" + ly.stringify(obj);
                        // 因为hash变化不引起刷新，需要手动调用loadData
                        this.loadData();
                    }
                }
            ,
            "search.filterMap":
                {
                    handler(val) {
                        // 把search对象中除了key以外的属性变成请求参数，
                        const {key, ...obj} = this.search;
                        // 拼接在url路径的hash中
                        window.location.hash = "#" + ly.stringify(obj);
                        // 因为hash变化不引起刷新，需要手动调用loadData
                        this.loadData();
                        // 还要加载新的过滤项
                        this.loadFilterList();
                    }
                }
        },
        components: {
            lyTop: () => import("./js/pages/top.js"),
        },
        //编写一个计算属性，把filters中的 已经被选择的key过滤掉：
        computed: {
            remainFilters() {
                //获取filterList 所有的key
                const keys = Object.keys(this.filterList);
                // 过滤掉等于1的
                const remainKeys = keys.filter(key => this.filterList[key].length > 1);
                // 定义空对象 记录符合条件的key
                const obj = {};
                // 遍历全部过滤项
                remainKeys.forEach(key => {
                    obj[key] = this.filterList[key];
                });
                return obj;
            }
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>